<template>
  <views class="my_account">
    <!-- 服务商端-提现 模态框 -->
    <modelBox :show="deposit_show" @show_box="show_box">
      <div class="add_lists">
        <div class="flex flexR add_lists_title">
                  <viewTitle :title="'提现'" :border="false"></viewTitle>
                  <div class="el-icon-close cp" @click="close_Model"></div>
        </div>    
        <div class="add_input_lists">
          <div class="flex flexR center add_inputs">
            <div class="add_input_lists_title">提现金额</div>
            <div class="add_input_lists_item">
              <el-input placeholder="请输入内容" v-model="deposit_price" clearable></el-input>
            </div>
          </div>
        </div>
        <!-- 可提现金额/全部提现 -->
        <div class="deposit_selectBtn flex flexR">
                <div><span>可提现金额：</span><span>{{$splitK(avi_balance)}}（元）</span></div>
                <div class="all_deposit" @click="()=>{this.deposit_price = this.avi_balance}">全部提现</div>
        </div>
        <!-- 确认 取消 -->
        <div class="Confirm_cancel flex flexR center">
          <el-button type="primary" @click="postWithadraw" >确定</el-button>
          <el-button type @click="close_Model" >取消</el-button>
        </div>
      </div>
    </modelBox>

    <!-- 代理商端（可提现）/服务商端（不可提现） -->
    <div
      v-if="this.$store.state.terrace==2||this.$store.state.terrace==3"
      class="agent_facilitator"
    >
      <div class="agent_facilitator_account">
        <div class="account_information flex flexR center">
          <div>账户汇总信息</div>
          <div class="view_details cp" @click="to_detail">查看详情</div>
        </div>
        <div class="balance flex flexC">
          <div class="flex balance_item flexR">
            <div>企业汇总余额:</div>
            <div class="balance_item_price">{{balance}}<span>（元）</span></div>
          </div>
          <div class="flex balance_item flexR">
            <div>累计手续费:</div>
            <div class="balance_item_price">{{service_charge}}<span>（元）</span></div>
          </div>
          <div class="flex balance_item flexR">
            <div>可用余额:</div>
            <div class="balance_item_price">{{avi_balance}}<span>（元）</span></div>
          </div>
          <div class="flex balance_item flexR">
            <div>冻结余额:</div>
            <div class="balance_item_price">{{freeze_balance}}<span>（元）</span></div>
          </div>
        </div>
        <!-- 立即提现 代理商端 -->
        <div class="withdraw_deposit flex flexR" v-if="this.$store.state.terrace==2">
          <div></div>
          <el-button type="primary" @click="withdraw_deposit">提现</el-button>
        </div>
      </div>
    </div>
    <!-- 企业端 -->
    <div v-if="this.$store.state.terrace==1" class="enterprise">
      <div class="enterprise-top flex flexR">
        <!-- 账户余额 -->
        <div class="account_balance">
          <viewTitle :title="'账户余额'" :border="false"></viewTitle>
          <div class="account_balance_show flex flexC">
            <div class="balance_show_Price">
              <span class="price1">￥</span>
              <span class="price2">{{$splitK(enterprise.data.balance)}}</span>
            </div>
            <div class="balance_show_title">企业账户总余额</div>
          </div>
        </div>
        <!--  交易余额 -->
        <div class="transaction_balance">
          <viewTitle :title="'交易额度'" :border="false"></viewTitle>
          <div class="trading_title">
            <div class="trading_title_list flex flexC">
              <div>1.企业向平台进行充值时，平台服务费会自动扣除。</div>
              <div>2.企业向平台充值后企业账户总余额会有短暂延时（预计5分钟）。</div>
              <div>3.企业账户总余额为扣除平台服务费后所得的可用总余额。</div>
              <div>4.企业向平台进行充值的历史记录详情均可在此永久查询。</div>
              <!--<div class="notice">注：请使用已添加至平台的企业银行账户进行汇款，否则平台无法自动同步资金信息至企业账户，如有疑问请联系平台客服人员 400-081-9091。</div>-->
            </div>
          </div>
        </div>
      </div>
      <!-- 企业商 表格 -->
      <div class="enterprise_table">
        <el-table
          border
          :data="enterprise.tableData"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed="left" type="index" label="序号" width="100"></el-table-column>
          <el-table-column fixed prop="facilitator_name" label="服务商名称" width="120"></el-table-column>
          <el-table-column :formatter="(row) => {return  $splitK(row.account_balance)}" label="账户余额" width="120"></el-table-column>
          <el-table-column :formatter="(row) => {return  $splitK(row.avi_balance)}" label="可用余额" width="120"></el-table-column>
          <el-table-column :formatter="(row) => {return  $splitK(row.freeze_balance)}" label="冻结余额" ></el-table-column>
          <el-table-column  label="操作" fixed="right" width="250">
            <div class="table_operation flex flexR">
              <el-button type="primary" @click="to_account_detail">查看详情</el-button>
              <!-- <el-button type="success">批量代发</el-button> -->
            </div>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </views>
</template>

<script>
export default {
  data() {
    return {
      //  企业端
      enterprise: {
        tableData: [],
        data:{
            balance:0
        }
      },
      avi_balance:0,
      freeze_balance:0,
      balance:0,
        service_charge:0,
      // 服务商端-提现
      deposit_show:false,     // 展示提现框
      deposit_price:"",      // 提现金额
    };
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    //  列表-去账户详情    企业端
    to_account_detail() {
      this.$toRoutePath({
        path: "/my_account/my_account_detail",
        edit: true,
        query: {}
      });
    },
    // 去账户详情    服务商端/代理商端
    to_detail() {
      this.$toRoutePath({
        path: "/my_account/my_account_detail",
        edit: true,
        query: {}
      });
      },
   //   提现-弹框
    show_box(val) {
          return
      if (val) {
        this.deposit_show = false;
      } else {
        this.deposit_show = true;
      }
    },
   // 提现-按钮
   withdraw_deposit(){
      this.deposit_price = '';
      this.deposit_show = true ;   
   },
   close_Model(){
      console.log(11)
       this.deposit_show = false;
   },
   getData(){
       if(this.$store.state.terrace==1){
          this.getEnterpriseData();
       }
       if(this.$store.state.terrace==2){
           this.getAgentData();
       }
       if(this.$store.state.terrace==3){
           this.getFacilitatorData();
       }

   },
   //获取数据
   getEnterpriseData(){
       let {code , msg, data} = this.$api.sendSync(this.$mapapi.eMyAccount);
       if(code != 200&&code!=501){
           this.$message.error(msg);
           return;
       }
       this.enterprise.tableData = data.list;
       this.enterprise.data = data;
   },
    getAgentData(){
        let {code , msg, data} = this.$api.sendSync(this.$mapapi.aMyAccount);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }
        this.balance = data.sum_balance;
        this.freeze_balance = data.freeze_balance;
        this.avi_balance = data.avi_balance;
    },
    getFacilitatorData(){
      let {code , msg, data} = this.$api.sendSync(this.$mapapi.fAccountSum);
      if(code != 200&&code!=501){
          this.$message.error(msg);
          return;
      }
        this.balance = data.sum_balance;
        this.freeze_balance = data.freeze_balance;
        this.avi_balance = data.avi_balance;
        this.service_charge = data.service_charge;
    },
    postWithadraw(){
        if(this.deposit_price > this.avi_balance){
            this.$message.error('余额不足');
            return;
        }

        let {code , msg} = this.$api.sendSync(this.$mapapi.awithdrawApply,{money:this.deposit_price});
        if(code != 200&&code!=501){
            this.$message.error(msg);
            return;
        }else{
            this.$message.success(msg);
            this.close_Model();
            this.getData();
        }

    }


  },
  mounted() {
    console.log("sss", this.$store.state);
    this.getData();
  },
  created() {}
};
</script>

<style lang="less" :scope="true"  src="@/style/account/my_account.less">
</style>
